<template>
    <div>
        <!--    <h1>当前求和: {{sum}}</h1>-->
        <h1>当前求和: {{sum}}</h1>
        <h1>getters通过固定逻辑获取数据: {{bigSum}}</h1>
        <h3>Person组件总人数: {{personNumber}}</h3>
        <select v-model="number">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数在加</button>
        <button @click="incrementWait">等一等再加</button>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    export default {
        name: 'Count',
        data() {
            return {
                number: 1, // 用户当前选择的数字
                // sum: 0, // 当前的和
            }
        },
        computed: {
            /*sum() {
              return this.$store.state.sum
            }*/
            ...mapState(['sum']),
            /*bigSum() {
                return this.$store.getters.bigSum
            }*/
            ...mapGetters(['bigSum']),
            personNumber() {
                return this.$store.state.personList.length
            }
        },
        methods: {
            increment() {
                // this.sum += this.number
                // this.$store.dispatch('add', this.number)
                // 简单的逻辑不用再传递到action中了, 直接commit提交到mutations中操作state的数据
                this.$store.commit('ADD', this.number)
            },
            decrement() {
                // this.sum -= this.number
                //   this.$store.dispatch('subtract', this.number)
                this.$store.commit('SUBTRACT', this.number)

            },
            incrementOdd() {
                /*if (this.sum % 2) {
                  this.sum += this.number
                }*/
                this.$store.dispatch('addOdd', this.number)

            },
            incrementWait() {
                /*setTimeout(() => {
                  this.sum += this.number
                }, 2000)*/
                this.$store.dispatch('addWait', this.number)
            },
        }
    }
</script>

<style scoped>
    button {
        margin-left: 10px;
    }

    h3 {
        color: red;
    }
</style>
